<template>
	<view class="queryRearchList">
		<view class="searchInput">
			<view class="back-icon">
				<uni-icons @tap="backFun" type="back" size="24"></uni-icons>
			</view>
			<input class="text" type="text" placeholder="输入企业名称、社会信用代码、法人姓名进行搜索" v-model="inputValue" :clearable="false"
				placeholder-class="placeholder-class" />
			<view class="send" @click="reSearch()">
				<image src="/static/img/searchImg.png" mode=""></image>
			</view>
		</view>
		<view class="list"   >
			<z-paging ref="paging" style="margin-top: 140rpx;"  autowire-list-name="searchList"   autowire-query-name="loadCompanyList" :created-reload="false" :how-refresher-when-reload="true"  :auto="true"   >
				<view class="li"  v-for="(e, i) in searchList" :key="i" @click="resultItem(e)">
					<view class="h1">{{ i+1 }}.{{ e.companyName }}</view>
					<view class="content">
						<view class="left">
							<view class="code">
								<text class="code-text">统一社会信用代码:{{ e.creditCode }}</text>
							</view>
							<view class="person">
								<text class="person-text">法人：{{ e.legalName }}</text>
							</view>
						</view>
						<view class="right" >
							查看详情 
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
	
		},
		data() {
			return { 
				inputValue: '', 
				searchList: [ ]
			}
		}, 
		onLoad(options) {  
			this.inputValue = options.value
			 const that = this; 
		}, 
		methods: {
			backFun(){
				uni.navigateBack()
			},
			reSearch(){ 
				this.$refs.paging.reload();
			},
			loadCompanyList(pageNum,pageSize){
				const that = this;
				uni.$api.getRobotCompanyList({
					current: pageNum,
					size:pageSize,
					companyName: this.inputValue
				}).then(res => {  
					if(res.data.code == '0'){ 
						that.$refs.paging.complete(res.data.data.records);
					} else {
						that.$refs.paging.complete(false);
					}
					
				},err =>{
					that.$refs.paging.complete(false);
				})
			},
			resultItem(e) {
				uni.navigateTo({
					url: '/pages/search/searchItem',
					success(res) {
						 res.eventChannel.emit('loadInitData', e)
					}
				})
			}
		},
		watch: {
	
		},
	}
</script>

<style lang="scss">
	.back-icon{
		width: 80rpx;
		height: 62rpx; 
		padding-top: 20rpx;
	}
	.queryRearchList {
		background: #ffffff;
		height: 100vh;
		padding-right: 10rpx;
		
		.searchInput {
			background: #ffffff;
			display: flex; 
			justify-content: center; 
			 width: 750rpx;
			height: 80rpx;
			padding: 50rpx 0;
			position: fixed;
			top:0;
			
			.text {
				width: 500rpx;
				height: calc(100% - 4rpx);
				background: #ffffff;
				text-indent: 1em;
				font-size: 22rpx;
				border: 2rpx solid #C8D4E8;
				margin-left: 10rpx;
			}
			
			.placeholder-class {
				font-size: 22rpx;
				text-indent: 1em;
			}
			
			.send {
				background: #0C2C56;
				padding: 15rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		
		.list {
			padding-top: 200rpx;
			
			.li {
				background: #ffffff;
				border-bottom: 1px solid #e2e2e2; 
				padding: 20rpx;
				
				.h1 {
					font-size: 24rpx;
				}
				
				.content {
					display: flex;
					justify-content: space-between;
					margin: 10rpx auto 0;
					align-items: center;
					
					.left {
						display: flex; 
						flex-direction: column;
						align-items: flex-start;
						
						
						.code {
							background: #ffffff;
							padding: 8rpx 15rpx;
							width: 500rpx;
							.code-text{
								color: #4097FF;
								font-size: 25rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
						
						.person { 
							background: #ffffff;
							padding: 8rpx 15rpx; 
							width: 500rpx;
						
							.person-text{
								color: #DF5E3D;
								font-size: 25rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							 
						}
					}
					
					.right {
						color: #3A94FF; 
						text-indent: -4.5em;
						left: -2%;
						 
					}
				}
			}
			
			.li+.li {
				margin: 10rpx auto 0;
			}
		}
	}
</style>